<template>
  <div class="login-bg">
    <div class="form-box">
      <!--      <a-input placeholder="请输入账号" size="large">-->
      <!--        <a-icon slot="prefix" type="user" />-->
      <!--      </a-input>-->
      <!--      <br /> <br />-->
      <!--      <a-input-password placeholder="请输入密码" size="large" >-->
      <!--        <a-icon slot="prefix" type="lock" />-->
      <!--      </a-input-password>-->
      <!--      <br /> <br />-->
      <!--      <a-button type="primary" size="large" block >登录</a-button>-->
      <h3>登录</h3>
      <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
              size="large"
              v-decorator="[
          'userName',
          { rules: [{ required: true, message: '账号不能为空' }] },
        ]"
              placeholder="请输入账号"
          >
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password
              size="large"
              v-decorator="[
          'password',
          { rules: [{ required: true, message: '密码不能为空' }] },
        ]"
              type="password"
              placeholder="请输入密码"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
          </a-input-password>
        </a-form-item>
        <a-form-item>

          <a-button type="primary" html-type="submit" class="login-form-button" size="large" block>
            登录
          </a-button>

        </a-form-item>
        <div class="user-login-other">
          <span>其他登录方式</span>
          <a>
            <a-icon class="item-icon" type="taobao-circle"></a-icon>
          </a>
          <a href="https://api.weibo.com/oauth2/authorize?client_id=3881732517&response_type=code&redirect_uri=http://115.158.22.8:8080/ok">
            <a-icon class="item-icon" type="weibo-circle"></a-icon>
          </a>
          <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
        </div>
      </a-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: 'normal_login'});
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);


          // const params= new URLSearchParams();

          // params.append('userAccount',values.userName);
          // params.append('userPassword',values.password)

          this.$axios({
            method: 'post',
            url: '/login',
            data: {
              'userAccount': values.userName,
              'userPassword': values.password
            }
          }).then(res => {
            console.log(res)
            localStorage.setItem("Access-Token", res.data.loginToken);
            if (res.data.code === 200) {
              this.$router.push("/home")
              this.$notification.success({
                message: '成功',
                description:
                    '你好啊',
              });
            } else {
              this.$notification.error({
                message: '错误',
                description:
                    '你的账号或密码错误',
              });
            }

          })

          // if (values.userName==="admin" && values.password==="admin"){


        }
      });
    },
  }
}
</script>

<style scoped lang="less">
.login-bg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://preview.pro.antdv.com/assets/background.a568162c.svg") no-repeat 50%;

}

.form-box {
  width: 25%;
  padding: 30px;
}

.form-box
.user-login-other {
  text-align: left;
  margin-top: 24px;
  line-height: 22px;

  .item-icon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.2);
    margin-left: 16px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #1890ff;
    }
  }

  .register {
    float: right;
  }
}
</style>
